<!-- slide start -->
<div id="slide" class="slide">
  <ul>
  <tag:houseSlide id="vo">
    <li><a href="javascript:void(0)"><img src="{$vo.img}"></a></li>
  </tag:houseSlide>
  </ul>
</div>
<script>
  GH.load("js", "js-slide", "__COMMON__/js/slide.js", function(){
      utuoSlide("slide");
  });
</script>
<!-- slide end -->
<div class="image-list mg10" id="image-list">
    <ul class="clearfix">
        <tag:housePhotoImage id="vo">
            <li class="image-list-item pd8"><img src="{$vo.url}"/></li>
        </tag:housePhotoImage>
    </ul>
</div>
<script type="text/javascript">
    
    //事件代理
    function delegate(type, obj, target, callback){
        obj.addEventListener(type, fun, false);
        function fun(e){
            var p = e.target;
            while (p) {
                if (p.nodeName.toLowerCase() === target.toLowerCase()) {
                    callback && callback.apply(p);
                }
                p = p.parentNode;
            }
        }
    }
    
    (function(){
    
        var imageList = document.getElementById("image-list"), imageListLi = imageList.getElementsByTagName("li"), startX = 0, translateX = 0, clientWidth = document.documentElement.clientWidth, clientHeight = document.documentElement.clientHeight, index = 0;
        
        //标记位置
        for (var i = 0; li = imageListLi[i]; i++) {
            li.index = i;
        }
        
        //代理，点击展示照片
        delegate("click", imageList, "li", function(){
            index = this.index;
            showPic();
        });
        
        //展示照片
        function showPic(){
        
            var imageView = document.createElement("div"), imageViewInner = document.createElement("ul"), imageViewClose = document.createElement("span"), html = "";
            
            for (var i = 0; li = imageListLi[i]; i++) {
                var src = li.children[0].getAttribute("src");
                html += "<li class='tc fl' style='height: " + clientHeight + "px; line-height:" + clientHeight + "px; width: " + clientWidth + "px'>" +
                "<img src='" +
                src +
                "' />" +
                "</li>";
            }
            
            //关闭按钮
            imageViewClose.setAttribute("class", "close");
            imageViewClose.innerHTML = "×";
            document.body.appendChild(imageViewClose);
            
            //关闭并删除DOM
            imageViewClose.addEventListener("click", function(e){
                this.style.display = "none";
                imageView.style.opacity = 0;
                setTimeout(function(){
                    document.body.removeChild(imageView);
                    document.body.removeChild(imageViewClose);
                }, 1000)
            }, false)
            
            //显示大图的层
            imageView.setAttribute("id", "imageView");
            imageView.setAttribute("class", "image-view transition");
            imageViewInner.setAttribute("class", "clearfix transition");
            imageViewInner.style.width = clientWidth * imageListLi.length + "px";
            imageViewInner.innerHTML = html;
            imageView.appendChild(imageViewInner);
            document.body.appendChild(imageView);
            
            //点击某一张图片后定位到这种图片上
            imageView.children[0].style.WebkitTransform = "translateX(" + -index * clientWidth + "px)";
            
            //监听touch事件
            imageView.addEventListener("touchstart", touchStart, false);
            imageView.addEventListener("touchmove", touchMove, false);
            imageView.addEventListener("touchend", touchEnd, false);
        }
        
        
        function touchStart(e){
            e.preventDefault();
            var touch = e.touches[0];
            startX = touch.pageX;
        }
        function touchMove(e){
            e.preventDefault();
            var touch = e.touches[0];
            var x = touch.pageX - startX;
            translateX = x; //滑动了多少距离
            this.children[0].style.WebkitTransitionDuration = "0ms";
            this.children[0].style.WebkitTransform = "translateX(" + (-index * clientWidth + x) + "px)";
        }
        function touchEnd(e){
            e.preventDefault();
            if (Math.abs(translateX) > clientWidth / 3) {
                translateX > 0 ? index-- : index++;
                (index < 0) && (index = 0);
                (index > imageListLi.length - 1) && (index = imageListLi.length - 1);
            }
            translateX = 0; //重置
            this.children[0].style.WebkitTransitionDuration = "200ms";
            this.children[0].style.WebkitTransform = "translateX(" + -index * clientWidth + "px)";
        }
    })()
</script>
